@charset "UTF-8";

@import "variables";
@import "reset";

.main-container {
  height: 100%;
}

#sidebar-view {
  position: relative;
  width: 22%;
  height: 100%;
  float: left;
  background-color: $blue;

  .user {
    height: 100px;
    padding: 20px;

    > img {
      width: 60px;
      height: 60px;
      border: none;
      border-radius: 50%;
      vertical-align: middle;
    }

    span {
      vertical-align: middle;
      margin-left: 10px;
      color: $white;
      font: {
        size: 1.2em;
        weight: bold;
      }
    }
  }

  .project-list {
    ul li {
      height: 50px;
      line-height: 50px;
      position: relative;

      a {
        color: $white;
        display: inline-block;
        height: 100%;
        width: 100%;
        cursor: pointer;
        span{
          margin-left: 25%;
        }
      }

      &.not-all {
        a {
          span:last-child {
            display: inline-block;
            float: right;
            margin-right: 40px;
          }
        }
      }

      &.active, &:hover {
        background-color: $hover-color;
      }

      .list-icon {
        position: absolute;
        top: 17px;
        left: 14%;
        color: $white;
        font-size: 18px;
      }
    }
  }

  .sign-out {
    height: 50px;
    line-height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
    > a {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      color: $white;
      cursor: pointer;
      background-color: $hover-color;

      &:hover {
        background-color: $sign-out-color;
      }
    }

    .sign-out-icon {
      position: absolute;
      top: 17px;
      left: 38%;
      color: $white;
    }
  }
}

#list-view {
  width: 38%;
  height: 100%;
  float: left;
  background-color: $border-color;
  position: relative;

  .search {
    height: 100px;
    width: 100%;
    padding: 25px 50px 0 50px;
    background-color: $border-color;

    > input {
      display: block;
      width: 100%;
      height: 50px;
      border: #ABABAB 1px solid;
      border-radius: 5px;
      background-color: $white;
      padding: 0 10px 0 50px;
      font-size: 16px;

      &:focus {
        border-color: $blue;
      }
    }

    .search-icon {
      position: absolute;
      font-size: 30px;
      color: #ABABAB;
      top: 33px;
      left: 63px;
    }

    &:focus {
      .search-icon {
        color: $blue;
      }
    }
  }

  .todo-list {
    height: 100%;
    width: 100%;

    ul {
      width: 100%;
    }

    ul li {
      height: 50px;
      width: 100%;
      line-height: 50px;
      padding: 0 20px;

      &.active, &:hover {
        background-color: #EAEAEA;
      }

      &.emptyTip {
        text-align: center;
      }

      .t-inner {
        height: 49px;
        position: relative;

        .toggle{
          position: absolute;
          top: 7px;
          left: -20px;
          appearance: none;
          cursor: pointer;
          &:after {
            content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#B5B5B5" stroke-width="3"/></svg>')
          }
          &:checked:after {
            content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#436EEE" stroke-width="3"/><path fill="#436EEE" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>')
          }
        }
      }

      .t-line {
        height: 1px;
        margin-left: 20px;
        background-color: #EAEAEA;
      }

      .t-check {
        color: #B5B5B5;
      }

      .t-content {
        padding-left: 30px;
        color: #000;
        display: inline-block;
        width: 360px;
        cursor: pointer;
        &.checked {
          color: #B5B5B5;
          text-decoration: line-through;
        }
      }

      .time {
        float: right;
      }
    }
  }

  .add-task {
    position: absolute;
    bottom: 50px;
    right: 50px;
    border: 1px solid #B5B5B5;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    color: #B5B5B5;
    cursor: pointer;
    background-color: transparent;
    transition: 0.2s ease;
    outline: none;

    &:hover {
      background-color: #fff;
      border-color: $blue;
      color: $blue;
    }
  }
}

#detail-view {
  margin-left: 60%;

  .detail-header {
    height: 100px;
    border-bottom: 1px solid #EDEDED;
    padding-left: 40px;
    font-size: 20px;
    position: relative;

    .detail-header-left {
      float: left;
      height: 100%;
      width: 55%;
      line-height: 100px;
      .title-label {
        display: inline-block;
        width: 100%;
        height: 40px;
        content: '';
        cursor: pointer;
      }
      > input {
        position: absolute;
        top: 29px;
        left: 40px;
        font-size: 20px;
        width: inherit;
        height: 40px;
        font-family: inherit;
      }
      .tag-label {
        position: absolute;
        top: 70px;
        left: 40px;
        font-size: 14px;
        line-height: normal;

        span {
          margin-left: 5px;
        }
      }
    }


    .detail-header-right {
      height: 100%;
      padding: 10px 0;
      margin-left: 20px;
      width: 160px;
      float: left;

      div:not(:last-child) {
        margin-bottom: 5px;
      }

      .time {
      }

      label {
        width: 30px;
        display: inline-block;
        cursor: pointer;
        text-align: center;
      }

      input, select {
        width: 120px;
        font-size: 20px;
      }


    }
  }

  .detail-content {
    position: relative;
    padding: 40px;
    height: 500px;
    overflow: auto;
    > p {
      width: 400px;
      height: 420px;
      content: '';
      cursor: pointer;
    }
    > textarea {
      position: absolute;
      top: 36px;
      outline: none;
      width: 398px;
      height: 420px;
      border: 0;
      line-height: 24px;
      font-size: 16px;
      font-family: inherit;
    }
  }

  .delete-btn {
    position: absolute;
    bottom: 20px;
    right: 30px;
    font-size: 30px;
    padding: 20px;

    > i {
      color: #B5B5B5;
      cursor: pointer;
      &:hover {
        color: $blue;
      }
    }
  }
}

.expand-transition {
  transition: all .3s ease;
  overflow: hidden;
}
.expand-enter , .expand-leave{
  height: 0;
  opacity: 0;
}

.appear-transition {
  transition: all .2s ease;
}
.appear-enter , .appear-leave{
  top: 0;
  opacity: 0;
}
